<template>
    <div class="audit-member-change-view">

      <el-form :model="datas" size="small" label-width="130px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="项目编号：">
              <div>{{project.project_no ? project.project_no : "无"}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目名称：">
              <div>{{project.project_name ? project.project_name : "无"}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目负责人：">
              <div>{{project.project_person_in_charge ? project.project_person_in_charge : "无"}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工期（天）：">
              <div>{{project.duration}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="计划开始时间：">
              <div>{{project.plan_start_time ? dateFormat1('yyyy-mm-dd',project.plan_start_time) : "无"}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="计划结束时间：">
              <div>{{project.plan_start_time ? dateFormat1('yyyy-mm-dd',project.plan_end_time) : "无"}}</div>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="变更原因：">
              <div>{{datas.description}}</div>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>

      <el-form :inline="true" :model="datas" size="small" label-width="130px">
        <el-row>

          <el-col :span="8" v-if="datas.member_before && datas.member_before.member_id">
            <el-form-item label="原成员：">
              <template>
                <span>{{datas.member_before.member_name}}</span>
                <span>({{datas.member_before.department_name}})</span>
              </template>

            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item :label="str">
              <template v-if="datas.member_after">
                <span>{{datas.member_after.member_name}}</span>
                <span>({{datas.member_after.department_name}})</span>
              </template>
            </el-form-item>
          </el-col>

        </el-row>


      </el-form>

    </div>
</template>

<script>
    export default {
        name: "memberChangeView",
        props:{
            datas:{
                type:Object,
                default:function () {
                    return{
                        member_before:{},
                        member_after:{}
                    }
                }
            },
            projects:{
                type:Object,
                default:{}
            }
        },
        watch:{
            datas:{
                handler(newV,oldV){
                    if (newV){
                        this.project = newV.project
                        this.str = '变更成员：'
                        if (!newV.member_before){
                            this.str = '新增成员：'
                        } else if (!newV.member_before.member_id) {
                            this.str = '新增成员：'
                        }
                    }
                },
                immediate:true,
                deep:true
            }
        },
        data(){
            return{
                project:{},
                str:'变更成员：'
            }
        }
    }
</script>

<style scoped>

</style>
